<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
	<script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="js/vote.js"></script>
</head>
<body>
<div id="app">
	<app>
		<div id="vote" class="wrap">
		<h2>查看投票</h2>
		<ul class="list">
			<li>
				<h4>{{vote.vname}}</h4>
				<p class="info">共有 {{vote.items.length}} 个选项，
					已有 {{vote.users}} 个网友参与了投票。</p>
					<ol>
						<li v-for=" i in vote.items">{{i.iname}}
							<div class="rate">
								<div class="ratebg">
									<div class="percent"
										 :style="{width: (all==0 ? 0:parseInt(i.nums * 100/all)) + '%'}"></div></div>
								<p>{{i.nums}}票<span>({{ all==0 ? 0: parseInt(i.nums * 100/all)}}%)</span></p>
							</div>
						</li>
					</ol>
					<div class="goback"><a href="manage.html">返回投票列表</a></div>
			</li>
		</ul>
	</div>
	</app>
</div>
<script>
	var v = new Vue({
		el:"#app",
		data:{
			vote:{items:[]},
			all: 0
		},
		created(){
			axios.get("FindVoteServlet"+location.search).then(res=> {
				this.vote = res.data;
				this.vote.items.forEach(i=>{
					this.all += i.nums;
				})
			});
		},
		methods:{
			rate(){
				// 计算选项的比率
			}
		}
	})
</script>
</body>
</html>
